<template>
  <div class="community-compile">
    <!-- head -->
    <qy-navigations
    btnType="pop"
    :tabSearch="tabSearch"
    :tabFunList="tabFunList"
    :popver_option='signOption'
    popver_title='发布文章'
    @getSearchData="getSearchData"
    @submitData="submitData"
    ></qy-navigations>
    <!-- content -->
    <div class="content qy-box-space">
      <p>文章标题</p>
      <el-input v-model="title" placeholder="请输入内容"></el-input>
      <p>文章内容</p>
      <div class="rich-content" id="rich-content"></div>
    </div>
  </div>
</template>

<script>
import E from "wangeditor"
import Request from '@/server/http'
import Api from '@/server/api'
import { ElMessage } from "element-plus"
const editor = new E("#rich-content")
export default {
  name: "community-detail",
  //components: { EditorBar },
  data() {
    return {
      /* 导航配置 */
      //按钮列表
      tabFunList:[
        {name:'发布',type:'func',func:'submitData',path:''}
      ],
      //搜索
      tabSearch:{show:true,func:'getSearchData'},
      /* 参数 */
      title:'',
      content: null,
      signOption: ["前端", "后端", "Android",'IOS','人工智能','开发工具','代码人生','阅读']
    };
  },
  methods: {
    // submit data
    submitData(param1) {
      const params = {
        title: this.title,
        content:editor.txt.html(),
        type:param1
      };
      console.log(params)
      Request.requestPost(params, Api.apiCommunity.blogAdd)
        .then((res) => {
          console.log(res);
          ElMessage({
            message: "发布成功！",
            center: true,
          });
          setTimeout(() => {
            this.$router.push("/community/home");
          }, 1000);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // get search data
    getSearchData(param1) {
      const params = {
        title: param1
      };
      Request.requestPost(params, Api.apiCommunity.blogSearch)
        .then((res) => {
          this.$store.commit('community/communitySearchDataGet',res.data.data)
          if(this.$route.path == '/community/home'){
            this.$router.push({path:'/community/search_result'})
          }else{
            this.getData();
          }
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // init editor
    initEditor(){
      editor.config.height = '60vh'
      editor.config.zIndex = 500
      editor.create()
    },
    // controller
    Controller(name, id, index) {
      switch (name) {
        case "community":
          this.$router.push("/community");
          break;
        case "home":
          this.$router.push("/");
          break;
        case "option":
          this.articleType = id
          this.clickIndex = index
          break;
        default:
          break;
      }
    },
  },
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:rgba(204,204,204,0.2)");
  },
  mounted(){
    this.initEditor()
  }
};
</script>

<style scoped lang="scss">
// 选项确定
.pover-option-click{
  background-color:rgba(0, 186, 255,0.1);
  border:1px solid #409eff !important;
}
// 发布块样式
.popver-box {
  display: flex;
  flex-direction: column;
  padding: 10px;
  .pover-title-one{
    color: #999999;
    font-size: 24px;
    font-weight: bolder;
    margin-bottom: 10px;
  }
  .pover-title-two{
    font-size: 21px;
    margin-bottom: 10px;
  }
  .pover-option-list{
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    flex-wrap: wrap;
    .pover-option-list_item{
      border: 1px solid #cccccc;  
      border-radius: 4px;
      padding: 5px 10px;
      margin: 5px 0;
      margin-right: 10px;
    }
  }
  .pover-option-submit{
    text-align: center;
  }
}
//content
.content {
  text-align: left;
  p {
    font-weight: bolder;
    font-size: 24px;
  }
  .rich-content {
    background-color: #ffffff;
    height: 60vh;
    z-index: 0;
  }
  .rich-content-inner {
    height: 94%;
  }
}
</style>
